<template>
	<Header :show-back="false" bg-color="#0066FF" title="我的" titleColor="#fff"/>
	<view class="my-header">
		<view class="user-infot">
			<image v-if="state.face" :src="state.face" mode="widthFix" />
			<image v-else src="../../static/face.png" mode="widthFix" />
			<view>
				<view class="name">{{ state.username }}</view>
				<view class="phone">{{ state.phone }}</view>
			</view>
		</view>
		<view>
			<view>提交资料</view>
		</view>
	</view>
	<up-cell-group>
		<up-cell icon="setting-fill" title="借阅记录" isLink url="/pages/borrowBook/index"></up-cell>
		<up-cell icon="integral-fill" title="申请退还押金" v-if="userStatusOptions.useDictItem(userStatus)?.apply" name="apply" @click="changeList"></up-cell>
	</up-cell-group>
	<Footer />
</template>

<script setup>
	import { reactive, computed } from "vue";
	import { pay } from "@/api/public"
	import { apply } from "@/api/book"
	import Header from "@/components/header/index.vue"
	import Footer from "@/components/footer/index.vue"
	
	import { useDict } from "@/dict/index.js"
	import { useStore } from "vuex"
	const store = useStore()
	// 字典
	const userStatusOptions = useDict('userStatusOptions')
	// 用户状态
	const userStatus = computed(() => store.state.app.userStatus)
	
	
	const state = reactive({
		face: "",
		username: "龙的传人",
		phone: "13713746864"
	})
	const changeList = () => {
		apply().then(() => {
			wx.showToast({
				title: "申请成功",
				icon: "none"
			})
		})
	}
</script>

<style lang="scss" scoped>
.my-header {
	background-color: #0066FF;
	height: 238rpx;
	display: flex;
	align-items: center;
	padding: 0 40rpx;
}
.user-infot {
	display: flex;
	align-items: center;
	color: #fff;
	image {
		width: 120rpx;
		height: 120rpx;
		margin-right: 24rpx;
		border-radius: 100px;
	}
	.name {
		margin-bottom: 16rpx;
		font-size: 32rpx;
	}
	.phone {
		font-size: 24rpx;
	}
}
</style>